<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave="mouseleave">
      <dt>
        全部分类
      </dt>
      <dd
        v-for="(item, index) in $store.state.home.menu"
        :key="index"
        class="category"
        @mouseenter="enter"
      >
        <i :class="item.type" />{{ item.name }}<span class="arrow" />
      </dd>
    </dl>
    <div v-if="kind" class="detail" @mouseenter="sover" @mouseleave="sout">
      <template v-for="(item, index) in curDetail.child">
        <div :key="index" class="detail_title">
          <h3>
            {{ item.title }}
          </h3>
          <a href="#">更多></a>
        </div>
        <span v-for="v in item.child" :key="v">
          <a :href="'/products?keyword=' + encodeURIComponent(v)">
            {{ v }}
          </a>
        </span>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data  () {
    return {
      kind: '',
      menu: []
    }
  },
  computed: {
    curDetail () {
      return this.$store.state.home.menu.filter(item => item.type === this.kind)[0]
    }
  },
  // async mounted () {
  //   const res = await this.$axios.get('/geo/getMenu')
  //   console.log(res.data.menu[0].menu)
  //   this.menu = res.data.menu[0].menu
  // },
  methods: {
    mouseleave () {
      // 鼠标离开把kind清空
      this._timer = setTimeout(() => {
        this.kind = ''
      }, 150)
    },
    enter (e) {
      // 鼠标经过获取这个元素的类名
      this.kind = e.target.querySelector('i').className
    },
    sover () {
      // 鼠标进入详情框，清除定时器
      clearTimeout(this._timer)
    },
    sout () {
      // 鼠标离开详情框，把kind置空
      this.kind = ''
    }
  }
}
</script>

<style lang="scss">
.category:nth-child(4)::after {
  content: 'HOT';
  font-size: 12px;
  color: red;
  background: yellow;
  display: inline-block;
  border-radius: 10px;
  padding: 0 7px;
  margin-left: 5px;
  transform: scale(0.9);
  position: relative;
  opacity: 1;
}
.detail_title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  height: 22px;
  line-height: 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
  h3{
    font-weight: 520;
    color:#222;
  }
  a{
    color: #999;
    &:hover{
      color: aqua;
    }
  }
}
</style>
